<template>
  <view class="app">
    <view class="job-item" v-for="(item, index) in jobItems" :key="index">
      <view class="job-item-footer">
        <!-- <span
					:class="'job-item-status '+(item.status.id === 1 ? 'recruiting':'stophiring')">{{item.status.title}}</span> -->
      </view>
    </view>
    <scroll-view scroll-y style="height: 1000px">
      <view class="search-bar">
        <input type="text" placeholder="搜索职位" />
      </view>
      <view class="bar-container">
        <view style="display: flex; gap: 1rem">
          <view
            v-for="(item, index) in barItems"
            :key="index"
            @click="toggleBarItem(index)"
            :class="{
              'bar-item': true,
              activity: item.isActivity,
              default: !item.isActivity,
            }">
            <span>{{ item.text }}</span>
          </view>
        </view>
        <view style="display: flex; flex-direction: column">
          <view
            style="display: flex; align-items: center; padding: 1rem"
            v-for="(item, index) in applicantItems"
            :key="index"
            @click="toPage">
            <view v-if="isBatchEdit">
              <checkbox :checked="item.isSeleted" />
            </view>
            <view
              style="
                display: flex;
                flex-direction: column;
                gap: 1rem;
                background-color: white;
                word-break: keep-all;
                width: 100%;
              ">
              <view style="display: flex; justify-content: space-between">
                <view style="display: flex; gap: 0.25rem">
                  <view class="image">
<!--                    <image-->
<!--                      src="../../../static/images/defultAvatar-1.png"-->
<!--                      mode=""-->
<!--                      style="width: 50px; height: 100%" />-->
                  </view>
                  <view
                    style="display: flex; flex-direction: column; gap: 0.25rem">
                    <view> </view>
                    <view style="display: flex; gap: 15rpx">
                      <span style="font-size: 28rpx">{{ item.name }}</span>
<!--                      <view class="contant_us"-->
<!--                        ><image-->
<!--                          src="../../../static/images/defultAvatar-1.png"-->
<!--                          mode=""-->
<!--                          style="width: 25px; height: 80%"-->
<!--                      /></view>-->
                      <span
                        class="real-name"
                        :style="
                          'font-size: 10px;line-height: 15rpx; padding: 10rpx; display: flex; align-items: center;' +
                          (item.isRealname ? 'color:#9B7748;' : 'color: red;')
                        "
                        >{{ item.isRealname ? "已实名" : "未实名" }}</span
                      >
                    </view>
                    <view class="b-desc" style="display: flex; gap: 0.25rem">
                      <view class="text">
                        <span style="padding: 0 2px">{{ item.age }}</span><text style="padding: 0 4rpx"> |</text></view
                      >
                      <view class="text">
                        <span style="padding: 0 2px">{{
                          item.degree
                        }}</span> <text style="padding: 0 4rpx"> |</text></view
                      >
                      <view class="text">
                        <span>{{ item.worktime }}经验</span></view
                      >
                    </view>
                  </view>
                </view>
                <view
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                  ">
                  <span
                    style="
                      width: fit-content;
                      display: flex;
                      align-items: center;
                      color: white;
                      padding: 0 0.5rem;
                      border-radius: 5rpx;
                      background-color: #34a1ff;
                      font-size: 25rpx;
                    "
                    >{{ item.applicantType }}</span
                  >
                  <span style="color: #999999;font-size: 28rpx">{{ item.location }}</span>
                </view>
              </view>
              <view style="display: flex; justify-content: space-between">
                <view style="display: flex; gap: 0.25rem; align-items: center">
                  <span style="font-size: 24rpx; color: gray">意向</span>
                  <span style="font-size: 28rpx">{{ item.intention }}</span>
                </view>
                <view>
                  <span>￥</span>
                  <span style="color: #ff9e24">{{ item.amount }}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isBatchEdit: false, // 是否进入批量编辑模式
      isSelectedAll: false, // 是否全选
      applicantItems: [
        {
          name: "赵小宝",
          isRealname: true,
          applicantType: "零工兼职",
          location: "天河区-东圃",
          intention: "客房主管",
          amount: "0.8k - 10k",
          isApplicant: true,
          age: 25,
          degree: "本科",
          worktime: "3年",
          isSeleted: true,
        },
        {
          name: "赵小宝",
          isRealname: true,
          applicantType: "零工兼职",
          location: "天河区-东圃",
          intention: "客房主管",
          amount: "0.8k - 10k",
          isApplicant: true,
          age: 25,
          degree: "本科",
          worktime: "3年",
          isSeleted: true,
        },
        {
          name: "赵小宝",
          isRealname: true,
          applicantType: "零工兼职",
          location: "天河区-东圃",
          intention: "客房主管",
          amount: "0.8k - 10k",
          isApplicant: true,
          age: 25,
          degree: "本科",
          worktime: "3年",
          isSeleted: false,
        },
        {
          name: "赵小宝",
          isRealname: true,
          applicantType: "零工兼职",
          location: "天河区-东圃",
          intention: "客房主管",
          amount: "0.8k - 10k",
          isApplicant: true,
          age: 25,
          degree: "本科",
          worktime: "3年",
          isSeleted: true,
        },
        {
          name: "赵小宝",
          isRealname: true,
          applicantType: "零工兼职",
          location: "天河区-东圃",
          intention: "客房主管",
          amount: "0.8k - 10k",
          isApplicant: true,
          age: 25,
          degree: "本科",
          worktime: "3年",
          isSeleted: false,
        },
      ],
      jobItems: [
        {
          title: "客房主管",
          type: {
            id: 2,
            title: "零工兼职",
          },
          date: "2022-1-20",
          amount: "3200.00",
          recruitment: {
            need: 12,
            total: 168,
            pass: 12,
          },
          status: {
            id: 1,
            title: "招聘中",
          },
        },
      ],
    };
  },
  methods: {
    // 切换批量编辑模式
    toggleBatchEdit() {
      this.isBatchEdit = !this.isBatchEdit;
      this.isSelectedAll = false; // 进入批量编辑模式时重置全选状态
    },
    // 全选/取消全选
    selectAll() {
      const { isSelectedAll, applicantItems } = this;
      const newApplicantItems = applicantItems.map((item) => {
        item.isSelected = !isSelectedAll;
        return item;
      });
      this.isSelectedAll = !isSelectedAll;
      this.applicantItems = newApplicantItems;
    },
    // 完成批量编辑
    finishBatchEdit() {
      // 在这里编写完成批量编辑的逻辑，例如提交选中的申请者信息等
      const selectedApplicants = this.applicantItems.filter(
        (item) => item.isSelected
      );
      console.log("选中的申请者信息：", selectedApplicants);
      // 完成后可以退出批量编辑模式
      this.isBatchEdit = false;
    },
    toPage() {
      console.log(getCurrentPages());
      uni.navigateTo({
        url: "/pages/talent/talentPage",
      });
      console.log("test");
    },
  },
};
</script>
<style scoped>
.app {
  background-color: hsl(0, 0%, 98%);
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.job-item {
  margin: 1rem;
  padding: 1rem;
  background: #fff;
  height: 50rpx;
}

.job-item > view {
  margin: 1rem 0;
}

.job-item-header {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.job-item-title {
  font-size: 24px;
}

.job-type {
  display: flex;
  align-items: center;
  color: white;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
}

.job-type-gig {
  background-color: #34a1ff;
}

.job-type-hourly {
  background-color: #f32763;
}

.job-item-dateNamount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.job-item-recruitment {
  background-color: hsl(0, 0%, 98%);
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.recruiting {
  color: #317ed0;
}

.job-item-recruitment > view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.job-item-recruitment > view > text:nth-child(2) {
  color: gray;
}

.job-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-item-status {
  font-weight: 900;
}

.job-item-footer > .operation {
  display: flex;
  gap: 10px;
}

.job-item-footer > .operation > .button {
  font-size: 12px;
  padding: 0.25rem 1rem;
  border: 1px solid gray;
  border-radius: 10rem;
  font-weight: 900;
}

.operation {
  display: flex;
  gap: 20px;
  color: #00000073;
}

.real-name {
  border-radius: 0.5rem;
  background: #ffebd1;
}

.search-bar {
  background-color: #fff;
  padding: 0 1rem;
}

.search-bar > input {
  background-color: #f8f8f8;
  padding: 0.5rem 3rem 0 0;
  background-image: url("data:image/svg+xml,%3Csvg t='1711695003507' class='icon' viewBox='0 0 1099 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1878' width='32' height='32'%3E%3Cpath d='M721.408 418.816c0 130.048-105.472 235.008-235.008 235.008s-235.008-105.472-235.008-235.008S356.352 183.808 486.4 183.808 721.408 289.28 721.408 418.816zM486.912 218.112c-111.616 0-202.752 90.112-202.752 201.216s90.624 201.216 202.752 201.216 202.752-90.112 202.752-201.216S598.528 218.112 486.912 218.112z' p-id='1879'%3E%3C/path%3E%3Cpath d='M846.848 780.288 822.272 802.304 628.224 590.848 651.776 566.784Z' p-id='1880'%3E%3C/path%3E%3C/svg%3E");
  background-position: 100% 0px;
  background-repeat: no-repeat;
}
.b-desc{
  font-size: 20rpx;
  color: #999999;
}
</style>
